<template>
    <div>
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <Input v-model="keyword" placeholder="分类名称" style="width: 200px" />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="page = 1;SearchProductType();" icon="md-search">查询</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="AddData()" icon="md-add">新增</Button>
                </FormItem>
            </Form>
        </Card>

        <vxe-table ref="xTable" align="center" border :data.sync="tableData" size="medium" :tree-config="{ transform: true, rowField: 'Id', parentField: 'ParentId',expandAll: true }">
            <vxe-column type="seq" title="序号" width="100"></vxe-column>
            <vxe-column field="Name" width="300" title="名称" tree-node></vxe-column>

            <vxe-column field="Sort" width="200" title="排序"></vxe-column>
            <vxe-column field=" "></vxe-column>
            <vxe-column align="center" width="200" title="操作">
                <template #default="{ row }">
                    <Button style="margin-right:5px" type="primary" size="small" @click="EditData(row)">修改</Button>
                    <Button type="error" size="small" @click="DeleteProductType(row.Id)">删除</Button>
                </template>
            </vxe-column>
        </vxe-table>

        <Modal :width="400" v-model="modalData" :title="tempData.Id > 0 ? '修改' : '新增'" :mask-closable="false" draggable sticky>
            <Form ref="formValidate" :model="tempData" :label-width="80" :rules="ruleValidate">
                <FormItem label="名称" prop="Name">
                    <Input v-model="tempData.Name" />
                </FormItem>
                <FormItem label="上级分类" prop="ParentId">
                    <treeselect v-model="tempData.ParentId" :searchable="false" :clearable="false" placeholder="上级分类" :options="treeData" />
                </FormItem>

                <FormItem label="排序" prop="Sort">
                    <InputNumber :min="0" v-model="tempData.Sort"></InputNumber>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalData = false">取消</Button>
                <Button type="primary" :loading="loading" @click="SaveProductType">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { SearchProductType, DeleteProductType, SaveProductType, GetTreeProductType } from '@/api/product'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { InitProductTypeTree } from '@/libs/tools'
export default {
    name: 'producttype',
    components: {
        Treeselect
    },
    data() {
        return {
            keyword: '',
            ruleValidate: {

                Name: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            loading: false,
            loadingTable: false,
            modalData: false,
            tempData: {
                Name: '',
                ParentId: 0
            },
            tableTitle: [
                {
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    width: 100
                },
                {
                    title: '操作',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            var vm = this
                                            vm.tempData = params.row
                                            vm.modalData = true
                                        }
                                    }
                                },
                                '修改'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.DeleteProductType(params.row.Id)
                                        }
                                    }
                                },
                                '删除'
                            )
                        ])
                    }
                },
                {
                    key: 'Name',
                    title: '名称',
                    width: 250,
                    align: 'center'
                },

                {
                    key: ' ',
                    title: ' '
                }
            ],
            tableData: [],
            treeData: []
        }
    },
    computed: {},
    methods: {
        InitProductTypeTree,
        SaveProductType() {
            let vm = this
            vm.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    vm.loading = true
                    SaveProductType(vm.tempData).then((res) => {
                        vm.loading = false

                        const data = res.data
                        if (data.StatusCode == 200) {
                            vm.modalData = false
                            vm.$Message.success({ title: '提示', content: '保存成功' })
                            vm.SearchProductType()
                            vm.GetTreeProductType()
                        } else {
                            vm.$Message.error({ title: '提示', content: data.Errors })
                        }
                    })
                }
            })
        },
        SearchProductType() {
            var reqData = {
                keyword: this.keyword
            }
            SearchProductType(reqData).then((res) => {
                var data = res.data
                if (data.StatusCode == 200) {
                    this.tableData = data.Data
                    this.$nextTick(() => this.$refs.xTable.setAllTreeExpand(true))
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },
        GetTreeProductType() {
            GetTreeProductType().then((res) => {
                var data = res.data
                if (data.StatusCode == 200) {
                    this.treeData = [
                        {
                            id: 0,
                            label: '顶级',
                            value: 0,
                            expand: true,
                            children: InitProductTypeTree(data.Data)
                        }
                    ]
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },
        DeleteProductType(id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确定要删除吗？',
                onOk: () => {
                    DeleteProductType(id).then((res) => {
                        const data = res.data
                        if (data.StatusCode == 200) {
                            this.SearchProductType()
                            this.GetTreeProductType()
                            this.$Message.success({ title: '提示', content: '删除成功' })
                        } else {
                            this.$Message.error({ title: '提示', content: data.Errors })
                        }
                    })
                },
                onCancel: () => { }
            })
        },

        AddData() {
            var vm = this
            vm.modalData = true
            vm.tempData = {
                Name: '',
                ParentId: 0
            }
        },
        EditData(row) {
            var vm = this
            vm.tempData = row
            vm.modalData = true
        }
    },

    mounted() {
        this.SearchProductType()
        this.GetTreeProductType()
    }
}
</script>

<style>
</style>
